<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <!--Import Google Icon Font-->
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <!--<link type="text/css" rel="stylesheet" href="materialize/css/materialize.min.css"  media="screen,projection"/>-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
    <style type="text/css">
        body{
            background-color: whitesmoke;
        }
        html {
            font-family: GillSans, Calibri, Trebuchet, sans-serif;
        }
        .nav-left{
            padding-left: 82px;
        }
        nav{
            position: fixed;
            top: 0px;
            z-index: 5;
        }
        #logo{
            padding-left: 18px;
        }
        #sidenav-overlay{
            z-index: 0;
        }
    </style>
    <title>个人中心</title>
</head>
<body>
<nav>
    <div class="nav-wrapper blue">
        <a href="/toInformation" class="brand-logo" id="logo">呜呼</a>
        <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
        <ul class="hide-on-med-and-down " style="margin-left: 82px">
            <li><a href="/toIndex">首页</a></li>
            <li><a href="#">发现</a></li>
            <li><a href="#">话题</a></li>
            <li><a href="/toWriteQuestion">提问</a></li>
        </ul>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
            <li><a href="/toContact"><i class="material-icons">chat_bubble_outline</i></a></li>
            <li><a href="#"><i class="material-icons">perm_identity</i></a></li>
            <li><a href="#"><i class="material-icons">more_vert</i></a></li>
        </ul>
        <ul class="side-nav" id="mobile-demo" style="z-index: 10000">
            <li><a href="/toIndex">首页</a></li>
            <li><a href="#">发现</a></li>
            <li><a href="#">话题</a></li>
            <li><a href="/toWriteQuestion">提问</a></li>
            <li><a href="/toContact">联系人</a></li>
            <li><a href="#">个人中心</a></li>
            <li><a href="#">设置</a></li>
        </ul>
    </div>
</nav>
    <div class="container" style="margin-top: 100px">
        <div class="row">
            <div class="col s12 m3">
                <div class="card" style="border: 1px solid lightgray;background-color: white">
                    <div class="card-image">
                        <img  class="responsive-img" src="../../img/1.jpg"/>
                        <span class="card-title">昵称</span>
                        <a class="waves-effect waves-light blue right btn-floating" style="margin-top: -18px;"><i class="material-icons tiny">mode_edit</i></a>
                    </div>
                    <div class="card-content">
                        <p class="hide-on-med-and-down">哈哈这里是我的个性签名但是只能有20个字</p>
                    </div>
                </div>
            </div>
            <div class="col m3 hide-on-med-and-down">
                <div class="card" style="border: 1px solid lightgray;background-color: white">
                    <div class="card-image">
                        <img class="responsive-img" src="../../img/1.jpg" style="width: auto"/>
                        <span class="card-title">待定的卡片，可以用来填充空白</span>
                        <a class="waves-effect waves-light blue right btn-floating" style="margin-top: -18px;"><i class="material-icons tiny">mode_edit</i></a>
                    </div>
                    <div class="card-content">
                        <p class=" hide-on-med-and-down">哈哈这里是我的个性签名但是只能有20个字</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="row" style="margin: 0px 0px">
            <div class="card" style="width: 98.2%;margin-top: -2%">
                <ul class="tabs" style="border-right: 1px solid lightgray;background-color: white;height: 40px;">
                    <li class="tab col s2"><a class="active" href="#swipe-1"><p style="margin-top: -2%; color: black;">真香</p></a></li>
                    <li class="tab col s2 answerBtn"><a href="#swipe-2"><p style="margin-top: -2%; color: black;">提问</p></a></li>
                    <li class="tab col s2"><a href="#swipe-3"><p style="margin-top: -2%; color: black;">回答</p></a></li>
                    <li class="tab col s2"><a href="#swipe-4"><p style="margin-top: -2%; color: black;">文章</p></a></li>
                    <li class="tab col s2"><a href="#swipe-5"><p style="margin-top: -2%; color: black;">想法</p></a></li>
                    <li class="tab col s2"><a href="#swipe-7"><p style="margin-top: -2%; color: black;">更多</p></a></li>
                </ul>
            </div>
                <div class="row">
                    <!--<div id="swipe-1" class="col s12">-->
                        <!--<div class="row">-->
                            <!--<div class="col s12 m6">-->
                                <!--<div class="card">-->
                                    <!--<div class="card-content">-->
                                        <!--<span class="card-title">推荐对的问题title或者也可以随机推荐书籍或者笑话？</span>-->
                                        <!--<span style="margin-left: 2%">作者昵称</span>-->
                                        <!--<p>我是一个很简单的卡片。我很擅长于包含少量的信息。我很方便，因为我只需要一个小标记就可以有效地使用。【字数限制80】</p>-->
                                    <!--</div>-->
                                    <!--<div class="card-panel">-->
                                        <!--<p style="display: inline;">发布问题的日期</p>-->
                                        <!--<a href="content.html"><p style="display: inline; margin-left: 10%">查看详细内容</p></a>-->
                                    <!--</div>-->
                                <!--</div>-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</div>-->
                    <div id="swipe-2" class="col s12">
                        <div class="row answerList">
                            <!--<div class="col s12 m6">-->
                                <!--<div class="card">-->
                                    <!--<div class="card-content">-->
                                        <!--<span class="card-title BiaoTi">卡片标题</span>-->
                                        <!--<p class="NeiRong">我是一个很简单的卡片。我很擅长于包含少量的信息。我很方便，因为我只需要一个小标记就可以有效地使用。【字数限制80】</p>-->
                                    <!--</div>-->
                                    <!--<div class="card-panel">-->
                                        <!--<a class="qId"><p style="display: inline; margin-left: 10%">查看详细内容</p></a>-->
                                    <!--</div>-->
                                <!--</div>-->
                            <!--</div>-->
                        </div>
                    </div>
                    <!--<div id="swipe-3" class="col s12">-->
                        <!--&lt;!&ndash;<div class="row">&ndash;&gt;-->
                            <!--&lt;!&ndash;<div>&ndash;&gt;-->
                        <!--<div class="card">-->
                            <!--<div class="card-content">-->
                                <!--<a href="content.html"><span class="card-title">我回答的问题的title</span></a>-->
                                <!--<p>这里是我对这个问题的回答，不限字数</p>-->
                            <!--</div>-->
                            <!--<div class="card-panel">-->
                                <!--<p style="display: inline;">回答问题的日期</p>-->
                            <!--</div>-->
                        <!--</div>-->
                        <!--<div class="card">-->
                            <!--<div class="card-content">-->
                                <!--<a href="content.html"><span class="card-title">我回答的问题的title</span></a>-->
                                <!--<p>这里是我对这个问题的回答，不限字数</p>-->
                            <!--</div>-->
                            <!--<div class="card-panel">-->
                                <!--<p style="display: inline;">回答问题的日期</p>-->
                            <!--</div>-->
                        <!--</div>-->
                            <!--&lt;!&ndash;</div>&ndash;&gt;-->
                        <!--&lt;!&ndash;</div>&ndash;&gt;-->
                    <!--</div>-->
                    <div id="swipe-4" class="col s12"></div>
                    <div id="swipe-5" class="col s12"></div>
                    <div id="swipe-6" class="col s12"></div>
                    <div id="swipe-7" class="col s12"></div>
                </div>
        </div>
    </div>
    <!--Import jQuery before materialize.js-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <!--<script type="text/javascript" src="materialize/js/materialize.min.js"></script>-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
    <script>
        $(document).ready(function(){
            $('.tabs').tabs();
            $("#sidenav").sideNav();
            $(".button-collapse").sideNav({draggable: true});
            $("#leftnavbar").on("click",function () {
                $('.button-collapse').sideNav('hide');
            });

            //获取个人信息
            $.a/*jax({
                url : '/questions/',
                type : "post",
                dataType : "json",
                data : send_data,
                success : function(data, textStatus, jqXHR) {
                    if ('success' == textStatus) {
                        // alert("success");
                        console.log(data);


                    }
                },
                error : function(XMLHttpRequest, textStatus, errorThrown) {
                    alert("error");
                }
            });*/

            $(".answerBtn").on("click",function () {
                console.log("i am hitted");
                $.ajax({
                    url : '/questions/findMyQuestions',
                    type : "get",
                    dataType : "json",
                    success : function(data, textStatus, jqXHR) {
                        if ('success' == textStatus) {
                            // alert("success");
                            console.log(data);
                            for (let i = 0; i<data.length; i++)
                            {
                                let divTemp = document.createElement("div");
                                divTemp.setAttribute("class","col s12 m6");
                                divTemp.innerHTML = "<div class=\"card\">\n" +
                                    "                                    <div class=\"card-content\">\n" +
                                    "                                        <span class=\"card-title BiaoTi\">"+ data[i].title +"</span>\n" +
                                    "                                        <p class=\"NeiRong\">"+ data[i].content +"</p>\n" +
                                    "                                    </div>\n" +
                                    "                                    <div class=\"card-panel\">\n" +
                                    "                                        <a class=\"qId\" name='"+ data[i]._id +"'><p style=\"display: inline; margin-left: 10%\">查看详细内容</p></a>\n" +
                                    "                                    </div>\n" +
                                    "                                </div>";
                                document.getElementsByClassName("answerList")[0].appendChild(divTemp);
                            }
                        }
                    },
                    error : function(XMLHttpRequest, textStatus, errorThrown) {
                        alert("error");
                    }
                });
            });
        });
    </script>
</body>
</html>